import util from '../util/index'
import React from 'react'
import cx from 'classnames'
import style from './style.app'

function helper(target) {
  if (target[0] === '"' || target[0] === "'") return target.slice(1, target.length-1)
  return target
}

export
function validate(str, i) {
  const [func, target]  = str.split('|')
  const ret = ((util) => (''+eval('util.' + func)) === helper(target))(util)
  return (
    <code key={i}>
      {func} => {target}
      <i
        className={cx({
          [style.fail]: !ret
        })}
      >
        { ret? 'pass': 'fail' }
      </i>
      {
        !ret? (
          <div className={style.result}>
            <span>result:</span>
            <b>{ typeof ((util) => eval('util.' + func))(util) === 'boolean'? (''+ ((util) => eval('util.' + func))(util)): ((util) => eval('util.' + func))(util) }</b>
          </div>
        ): null
      }
    </code>
  )
}
